<!--  -->
<template>
  <input
    class="cm-input-mini"
    type="text"
    :placeholder="placeholder"
    :style="{ width: width + 'px' }"
    @keyup.enter="submit"
    v-model="inputValue"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      width: 20,
    };
  },

  props: ["placeholder",'wordsLimit'],

  components: {},

  computed: {},

  methods: {
    submit() {
      if(this.inputValue!=""){
      this.$emit("submit", this.inputValue);
      this.inputValue = "";
      }
      else{
        alert("不能为空！！！")
      }
    },
  },

  created() {
    this.width = this.placeholder.length * 12;
  },
  watch:{
    inputValue(newval){
      if(newval.length>this.wordsLimit){
        alert("字数超出限制")
      }
    }
  }
};
</script>
<style>
.cm-input-mini {
  font-size: 12px;
  line-height: 20px;
  padding: 0 7px;
  transition: all 0.2s;
  border: 1px rgba(209, 223, 255, 0.728) solid;
  outline: none;
  border-radius: 10px;
  color: rgb(160, 160, 160);
  display: inline-block;
  width: auto;
}
.cm-input-mini:focus {
  border: 1px rgb(174, 198, 255) solid;
  background-color: aliceblue;
  color: rgb(95, 95, 95);
  transition: all 0.2s;
}
</style>
